<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j">

	<h:panelGrid columns="2" styleClass="personInfo"
		columnClasses="phoneNumberAndEmailGridCol1, phoneNumberAndEmailGridCol2">
		<h:outputText value="#{personmsgs['phoneNumber_email']}" />
		<h:outputText value="*" style="color:red;" />
	</h:panelGrid>

	<h:panelGrid columns="4" styleClass="inputBlock"
		columnClasses="phoneEmailGridCol1, phoneEmailGridCol2, phoneEmailGridCol3, phoneEmailGridCol4">
		<h:panelGroup>
			<h:outputText value="*" style="color:red;" />
			<h:outputText value="#{personmsgs['phoneNumber_email.mobilePhone']}" />
		</h:panelGroup>
		<h:panelGroup id="grpNumberPhone">
			<h:selectOneMenu id="selectmNationalCode"
				value="#{person.selectedNationalCode}"
				onchange="onSelectNationalPhoneCodeChange('#{rich:clientId('selectmNationalCode')}','#{rich:clientId('mNCode')}')">
				<f:selectItems value="#{person.nationalities}" />
			</h:selectOneMenu>
			<br />
			<s:decorate id="decm" template="/layout/validationTemplate.xhtml">
				<h:inputText id="mNCode" value="#{person.mNationalCode}"
					style="width:20px;" readonly="true" required="true" />
			</s:decorate>
			<s:decorate template="/layout/validationTemplate.xhtml">
				<h:inputText value="#{person.mAreaCode}" style="width:50px;"
					maxlength="5" required="true" />
			</s:decorate>
			<s:decorate template="/layout/validationTemplate.xhtml">
				<h:inputText value="#{person.mNumberPhone}" style="width:100px"
					maxlength="15" required="true" />
			</s:decorate>
		</h:panelGroup>
		<h:panelGroup>
			<h:outputText value="*" style="color:red;" />
			<h:outputText value="#{personmsgs['phoneNumber_email.homePhone']}" />
		</h:panelGroup>
		<h:panelGroup>
			<h:selectOneMenu id="selectpNationalCode" style="width:100;"
				onchange="onSelectNationalPhoneCodeChange('#{rich:clientId('selectpNationalCode')}','#{rich:clientId('pNCode')}')">
				<f:selectItems value="#{person.nationalPhoneCodes}" />
			</h:selectOneMenu>
			<br />
			<s:decorate id="decp" template="/layout/validationTemplate.xhtml">
				<h:inputText id="pNCode" value="#{person.pNationalCode}"
					style="width:20px;" readonly="true" required="true" />
			</s:decorate>
			<s:decorate template="/layout/validationTemplate.xhtml">
				<h:inputText value="#{person.pAreaCode}" style="width:50px;"
					maxlength="5" required="true" />
			</s:decorate>
			<s:decorate template="/layout/validationTemplate.xhtml">
				<h:inputText value="#{person.pNumberPhone}" style="width:100px;"
					maxlength="15" required="true" />
			</s:decorate>
		</h:panelGroup>

		<h:panelGroup>
			<h:outputText value="*" style="color:red;" />
			<h:outputText value="#{personmsgs['phoneNumber_email.email']}" />
		</h:panelGroup>
		<s:decorate template="/layout/validationTemplate.xhtml">
			<h:inputText id="iEmail" value="#{person.email}" required="true" maxlength="255" style="width:80%;"/>
		</s:decorate>
		<h:panelGroup>
			<h:outputText value="*" style="color:red;" />
			<h:outputText
				value="#{personmsgs['phoneNumber_email.email_confirmation']}" />
		</h:panelGroup>
		<s:decorate template="/layout/validationTemplate.xhtml">
			<h:inputText value="#{person.confirmationEmail}" required="true"
				maxlength="255" style="width:80%;">
				<s:validateEquality for=":#{rich:clientId('iEmail')}" message="#{messages['validator.confirmMustMatch']}"/>	
			</h:inputText>
		</s:decorate>
	</h:panelGrid>
</ui:composition>
